
<template>
    <div>
        <div class="flex gap-3">
            <el-input placeholder="查询内容" v-model="query"></el-input>
            <el-button @click="doQuery">确认</el-button>
            <UButton @click="() => { addNew = !addNew }">新增</UButton>

        </div>
        <UTable loading :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
             v-if="tableData" :rows="tableData" :columns="columns">
            <template #actions-data="{ row }">
                <!-- <span class=" hover:cursor-pointer">{{ row.actions }}</span> -->
                <UDropdown :items="items(row)">
                    <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
                </UDropdown>
            </template>
          <template #pics-data="{ row }">
            <img :src="row.pics" alt="pics" class="w-10 h-10 rounded-full">
          </template>
        </UTable>
        <UModal v-model="isOpen">
            <UCard>
                <template #header>
                    <div class="h-8">
                        <h1 class="text-lg font-bold">修改信息</h1>
                    </div>
                </template>
                <div class=" flex flex-col gap-9">
                    <div><span class=" text-2xl">id</span>
                        <UInput v-model="item.id" />
                    </div>
                    <div><span class=" text-2xl">username</span>
                        <UInput v-model="item.username" />
                    </div>
                    <div><span class=" text-2xl">password</span>
                        <UInput v-model="item.password" />
                    </div>
                    <div><span class=" text-2xl">height</span>
                        <UInput v-model="item.height" />
                    </div>
                    <div><span class=" text-2xl">weight</span>
                        <UInput v-model="item.weight" />
                    </div>
                    <div><span class=" text-2xl">age</span>
                        <UInput v-model="item.age" />
                    </div>
                    <div><span class=" text-2xl">gender</span>
                        <UInput v-model="item.gender" />
                    </div>
                    <div><span class=" text-2xl">bmi</span>
                        <UInput v-model="item.bmi" />
                    </div>
                    <div><span class=" text-2xl">ext</span>
                        <UInput v-model="item.ext" />
                    </div>
                    <div><span class=" text-2xl">pics</span>
                        <UInput v-model="item.pics" />
                    </div>
                    <div><span class=" text-2xl">login_time</span>
                        <UInput v-model="item.login_time" />
                    </div>
                    <div><span class=" text-2xl">reserve_2</span>
                        <UInput v-model="item.reserve_2" />
                    </div>
                    <div><span class=" text-2xl">role</span>
                        <UInput v-model="item.role" />
                    </div>
                    <div class="flex gap-2">
                        <UButton @click="() => { updateOne() }">
                            确认
                        </UButton>
                        <UButton color="white" @click="isOpen = false">
                            取消
                        </UButton>
                    </div>
                </div>
            </UCard>
        </UModal>

        <UModal v-model="addNew">
        <UCard>
          <template #header>
            <div class="h-8">
              <h1 class="text-lg font-bold">新增</h1>
            </div>
          </template>
          <div class=" flex flex-col gap-9">
            <el-form>
              <el-form-item label="用户名">
                <el-input v-model="item.username" />
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="item.password" />
              </el-form-item>

              <el-form-item >
                <el-button type="primary" @click="addOne">提交</el-button>
              </el-form-item>

            </el-form>
          </div>
        </UCard>
      </UModal>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
const toast = useToast()
let tableData = ref([])
const query = ref('')
function fuzzySearch(query, target) {
    return target.toLowerCase().includes(query.toLowerCase());
}
let _tableData =ref([])
const doQuery = ()=>{
 if(query.value!==''){
    let out = tableData.value.filter(item=>{
    let content = JSON.stringify(item)
    return fuzzySearch(query.value,content)
 })
 tableData.value = out
}else{
    tableData.value = _tableData.value
}
}

let addNew = ref(false)

let item = reactive({
    id: '', username: '', password: '', height: '', weight: '', age: '', gender: '', bmi: '', ext: '', pics: '', login_time: '', reserve_2: '', role: '',
})
function addOne() {
  let payload = {
    username: item.username,
    password: item.password,
  }
  axios.post('http://localhost:8000/user/add_one', payload).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '新增失败',
                color: 'red',
                // description: resp.msg,
            })
        } else {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '新增成功',
                // description: resp.msg,
            })
            getAll()
            addNew.value = false
        }
    })
}
let isOpen = ref(false)
function getAll() {
    axios.post('http://localhost:8000/user/get_one', {}).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            console.log(resp)
        } else {
            tableData.value = resp.data
            _tableData.value = resp.data
        }
    })
}
function deleteOne(item) {
    axios.post('http://localhost:8000/user/delete_one', item).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '删除失败',
                color: 'red',
                // description: resp.msg,
            })
        } else {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '删除成功',
                // description: resp.msg,
            })
            getAll()
        }
    })
}
function updateOne() {
    item.id = item.id
    axios.post('http://localhost:8000/user/update_one', { 'cond': { 'id': item.id }, 'item': item }).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '更新失败',
                color: 'red',
                // description: resp.msg,
            })
        } else {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '更新成功',
                // description: resp.msg,
            })
            getAll()
            isOpen.value = false
        }
    })
}
getAll()

const columns = [

  { 'key': 'actions', 'label': '操作' },
    { 'key': 'id', 'label': 'id' }, { 'key': 'username', 'label': '用户名' }, { 'key': 'password', 'label': '密码' }, 
    { 'key': 'height', 'label': '身高' }, 
    { 'key': 'weight', 'label': '体重' },
     { 'key': 'age', 'label': '年龄' }, { 'key': 'gender', 'label': '性别' },
      { 'key': 'bmi', 'label': 'bmi' }, { 'key': 'ext', 'label': '计划' },
       { 'key': 'pics', 'label': '头像' },
        { 'key': 'login_time', 'label': '登陆时间' },  { 'key': 'role', 'label': '角色' },
]

const items = (row) => [
    [{
        label: 'Edit',
        icon: 'i-heroicons-pencil-square-20-solid',
        click: () => {
            isOpen.value = true
            console.log(row)
            item.id = row.id
            item.id = row.id; item.username = row.username; item.password = row.password; item.height = row.height; item.weight = row.weight; item.age = row.age; item.gender = row.gender; item.bmi = row.bmi; item.ext = row.ext; item.pics = row.pics; item.login_time = row.login_time; item.reserve_2 = row.reserve_2; item.role = row.role;
        }
    }, {
        label: 'Delete',
        icon: 'i-heroicons-trash-20-solid',
        click: () => { deleteOne(row) }
    }]
]

</script> 

<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>

